<template>
  <div class="organizer-detail-page">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="组织详情"
      left-arrow
      @click-left="goBack"
      class="nav-bar"
    ></van-nav-bar>

    <!-- 组织者信息展示 -->
    <div class="organizer-detail">
      <!-- 图片 -->
      <img class="organizer-pic" :src="organizer.pic" alt="组织图片" />

      <!-- 信息 -->
      <div class="organizer-content">
        <h1 class="organizer-name">{{ organizer.name }}</h1>
        <p class="organizer-description">{{ organizer.description }}</p>

        <!-- 联系信息 -->
        <div class="contact-info">
          <p>联系人: {{ organizer.contactName }}</p>
          <p>邮箱: {{ organizer.contactEmail }}</p>
          <p>电话: {{ organizer.contactPhone }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import { Toast } from "vant";
import organizerApi from "@/api/organizerProfile.js";

export default {
  data() {
    return {
      organizer: {
        id: null,
        name: "",
        pic: "",
        contactName: "",
        contactEmail: "",
        contactPhone: "",
        description: "",
      },
    };
  },
  created() {
    // 获取URL中的ID参数并加载数据
    const organizerId = this.$route.query.id;
    if (organizerId) {
      this.fetchOrganizerDetails(organizerId);
    } else {
      Toast.fail("无效的组织者ID");
      this.goBack();
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    fetchOrganizerDetails(id) {
      organizerApi.getOneOrganizerProfile(id).then((res) => {
        console.log(res);
        this.organizer = res;
      });
      // 模拟接口调用
      // const mockData = {
      //   id: id,
      //   name: "泉师",
      //   pic: "https://volunteersystem.oss-cn-beijing.aliyuncs.com/1.webp",
      //   contactName: "王二",
      //   contactEmail: "1@qq.com",
      //   contactPhone: "111",
      //   description: "这是一个优秀的组织者",
      // };
      // // 模拟延时加载
      // setTimeout(() => {
      //   this.organizer = mockData;
      // }, 500);
    },
  },
};
</script>
  
  <style scoped>
/* 导航栏样式 */
.nav-bar {
  background: linear-gradient(to right, #007aff, #4a90e2); /* 常用蓝色 */
  color: white; /* 字体颜色为白色 */
}
.van-nav-bar ::v-deep .van-nav-bar__text,
.van-nav-bar ::v-deep .van-nav-bar__title {
  color: white !important;
}

.van-nav-bar ::v-deep .van-nav-bar__arrow {
  color: white !important;
}

/* 组织者信息区域 */
.organizer-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2vh auto;
  padding: 2vh 4vw;
  background: #fff;
  border-radius: 1vh;
  padding-top: 12vh; /* 增加顶部间距 */
}

.organizer-pic {
  width: 30vh; /* 宽度 */
  height: 30vh; /* 高度 */
  border-radius: 1vh;
  object-fit: cover; /* 保持比例裁剪 */
  margin: 0 auto; /* 居中 */
}

.organizer-content {
  width: 100%;
  margin-top: 2vh;
  text-align: center;
}

.organizer-name {
  font-size: 3vh;
  font-weight: bold;
  color: #333;
  margin-bottom: 1vh;
}

.organizer-description {
  font-size: 2vh;
  color: #666;
  margin-bottom: 2vh;
}

.contact-info p {
  font-size: 1.8vh;
  color: #444;
  margin-bottom: 0.5vh;
}

/* 响应式调整 */
@media (max-width: 600px) {
  .organizer-pic {
    width: 50vw; /* 在小屏幕上使用vw单位来适应 */
    height: 50vw;
  }

  .organizer-name {
    font-size: 4vw; /* 在小屏幕上调整字体大小 */
  }

  .organizer-description {
    font-size: 3vw; /* 增大描述字体 */
  }

  .contact-info p {
    font-size: 3vw; /* 增大联系方式字体 */
  }
}
</style>
  